/* 编辑tab
 * EditTab.jsx
 */
import React, { Component, PropTypes } from 'react';

import {upCompAttr,upCompSurface,upCompAnimation,upCompEvent} from '../../../actions/h5/ComponentAction';
import {updatePageAttr} from '../../../actions/h5/PageAction';
import {listMusic,listImage,listFile,clearPageIdArr} from '../../../actions/FileHandleAction';
import {upH5Attr} from '../../../actions/h5/H5Action';

import {FONTS,ANIMATIONS} from '../../../utils/H5constants';
import UploadComponent from '../../../components/UploadComponent.jsx';
import {getImageWH} from '../../../utils/H5helper';

//图片选中时的编辑页面
class ImageEditComp extends Component{
	constructor(props){
		super(props);
	}
	componentDidMount(){
		$('.imgButton').popup({
    		popup : $('#rightImgPopup'),
    		on   : 'click'
  		});
  		$("#resizeBtn").popup({
  			position:"bottom right"
  		})
  	}

  	//查询图片列表
  	imgList(){
  		this.props.dispatch(listImage(null,null,10));//加载服务器的h5图片
  	}

	imgClick(src,imgName){
		const compId=this.props.currentComp.get('id');
		this.props.dispatch(upCompAttr(this.props.pageId,compId,{src:src,name:imgName}));
	}

	resize(){
		const attributes=this.props.currentComp.get('attributes');
		const compId=this.props.currentComp.get('id');
		const res=getImageWH(attributes.get('src'));
		this.props.dispatch(upCompSurface(this.props.pageId,compId,{width:res.width,height:res.height}));
		//设置选中框
		const surface=this.props.currentComp.get('surface').merge({width:res.width,height:res.height});
		const comp=this.props.currentComp.set('surface',surface);
		this.props.setSelectComp(comp);
	}

	render(){
		const attributes=this.props.currentComp.get('attributes');
		const upCompProps={//上传组件的属性
			width:530,
			height:350,
			showTabs:['image'],//显示的标签页
			imgClick:this.imgClick.bind(this),//设置图片点击事件
			imgListProps:this.imgListProps,  //显示的图片展示的属性
			multiple:false   //是否允许多个文件同时上传
		}
		return(
			<div>
				<div className="ui sub header">图片来源</div>
				<div className="ui action input">
				  <input  type="text" disabled={true} value={attributes.get('name')} />
				  <button className="ui icon button imgButton" onClick={this.imgList.bind(this)}><i className="file image outline icon"></i></button>
				  <button id="resizeBtn" data-content="还原尺寸" className="ui icon button" onClick={()=>this.resize()}><i className="undo icon"></i></button>
				</div>
				<div className="ui divider"></div>
				{/*<div className="ui toggle checkbox h5-labeled-input">
				  <input name="wechatRead" type="checkbox" checked={attributes.get('wechatRead')} onChange={()=>{this.props.editCompAttribute('wechatRead',!attributes.get('wechatRead'))}}/>
				  <label>支持微信长按识别二维码</label>
				</div>*/}
				<div id="rightImgPopup" className="ui custom popup">
					<UploadComponent {...upCompProps} />
				</div>
			</div>
			);
	}
}

 //编辑tab
class EditTab extends Component{
	constructor(props){
		super(props);
	}

	editCompAttribute(name,value){
		const compId=this.props.currentComp.get('id');
		this.props.dispatch(upCompAttr(this.props.pageId,compId,{[name]:value}));
	}

	render(){
		const attributes=this.props.currentComp.get('attributes');
		let classProps="ui bottom attached tab segment";
		if(this.props.active){
			classProps += " active";
		}
		classProps='';

		if(this.props.currentComp.get('id')==null){//页面时
			return (<div className={classProps} style={{paddingLeft:10}}>
						<i className="announcement icon"></i>
						<span style={{marginLeft:10}}>选择组件进行编辑</span>
					</div>);
		}
		

		//字体设置
		const fontOpts=FONTS.map(item=>{
			return (<option key={item.value} value={item.value} style={{fontFamily:item.value}}>{item.name}</option> );
		});
		let fontSize=Array();
		for(let i=12;i<=100;i++){
			fontSize.push(<option key={i} value={i} style={{fontSize:i}}>{i}</option>);
		}
		const fontSet=(
				<div className="panel-group">{/* 字体设置 */}
					<div className="input-group">
					  <span className="input-group-addon">&emsp;字体&emsp;</span>
					  <select className="form-control input-sm" value={attributes.get('fontFamily')} onChange={(e)=>{this.editCompAttribute('fontFamily',e.target.value)}} >{fontOpts}</select>
					</div>

					<div className="input-group">
					  <span className="input-group-addon">字体大小</span>
					  <select className="form-control input-sm" value={attributes.get('fontSize')} onChange={(e)=>{this.editCompAttribute('fontSize',e.target.value)}} >{fontSize}</select>
					</div>

					<div className="input-group">
						<span className="input-group-addon">字体颜色</span>
						<input type="color" value={attributes.get('fontColor')} onChange={(e)=>{this.editCompAttribute('fontColor',e.target.value)}} />
					</div>
					
					{/* 加粗，斜体，下划线 */}
					<div className="ui icon buttons" style={{marginTop:5}}>
					  <button className={attributes.get('bold')?"ui button active":"ui button"} onClick={()=>this.editCompAttribute('bold',!attributes.get('bold'))}><i className="bold icon"></i></button>
					  <button className={attributes.get('italic')?"ui button active":"ui button"} onClick={()=>this.editCompAttribute('italic',!attributes.get('italic'))}><i className="italic icon"></i></button>
					  <button className={attributes.get('underline')?"ui button active":"ui button"} onClick={()=>this.editCompAttribute('underline',!attributes.get('underline'))}><i className="underline icon"></i></button>
					</div>
					<div className="ui divider"></div> {/*分隔条*/}
					<div className="ui sub header">对齐方式</div>
					<div className="ui icon buttons">
					  <button className={attributes.get('textAlign')=='left'?"ui button active":"ui button"} onClick={()=>this.editCompAttribute('textAlign','left')}><i className="align left icon"></i></button>
					  <button className={attributes.get('textAlign')=='center'?"ui button active":"ui button"} onClick={()=>this.editCompAttribute('textAlign','center')}><i className="align center icon"></i></button>
					  <button className={attributes.get('textAlign')=='right'?"ui button active":"ui button"} onClick={()=>this.editCompAttribute('textAlign','right')}><i className="align right icon"></i></button>
					</div>
					<div className="ui divider"></div>
				</div>
			);
		//行高设置
		const lineHeightSet=(
				<div className="panel-group">{/*行高设置*/}
					<div className="input-group">
						<span className="input-group-addon">行高</span>
						<span className="input-group-addon ranger">
							<input name="line-height" type="range" step="0.1" min="0" max="6" 
								value={attributes.get('lineHeight')} onChange={(e)=>{this.editCompAttribute('lineHeight',e.target.value)}} />
						</span>
						<input type="number" className="form-control input-sm" step="0.1" min="0" value={attributes.get('lineHeight')} onChange={(e)=>{this.editCompAttribute('lineHeight',e.target.value)}} />
					</div>
					
					<div className="ui divider"></div>
				</div>
			);
		//图片设置
		const imgProps={
			currentComp:this.props.currentComp,
			dispatch:this.props.dispatch,
			editCompAttribute:this.editCompAttribute.bind(this),
			pageId:this.props.pageId
		}
		const imgSet=(<ImageEditComp {...imgProps} />);
		//文本内容设置
		const labelContent=(
				<div>{/*行高设置*/}
					<div className="ui sub header">文本内容</div>
					<div>
						<textarea style={{height:80,width:'100%'}} value={attributes.get('content')} onChange={(e)=>{this.editCompAttribute('content',e.target.value)}} />
					</div>
					<div className="ui divider"></div>
				</div>
			);

		//表单基本设置
		const baseSet=(
				<div className="panel-group">
					<h4 className="ui header">基本设置</h4>
					<div className="input-group">
					  <span className="input-group-addon">&emsp;必填&emsp;</span>
					  <select className="form-control input-sm" value={attributes.get('required')} onChange={(e)=>{this.editCompAttribute('required',e.target.value)}} >
					  	  <option value="false">否</option>
					  	  <option value="true">是</option>
					  </select>					
					</div>

					<div className="input-group">
					  <span className="input-group-addon">&emsp;名称&emsp;</span>
					  <input className="form-control input-sm" value={attributes.get('name')} type="text" onChange={(e)=>{this.editCompAttribute('name',e.target.value)}} />			
					</div>
					
					<div className="input-group">
					  <span className="input-group-addon">提示文字</span>
					  <input className="form-control input-sm" value={attributes.get('placeholder')} type="text" onChange={(e)=>{this.editCompAttribute('placeholder',e.target.value)}} />
					</div>
					
					<div className="ui divider"></div>
				</div>
			);
		//表单基本设置
		const baseSet2=(
				<div className="panel-group">
					<h4 className="ui header">基本设置</h4>
					<div className="input-group">
					  <span className="input-group-addon">&emsp;名称&emsp;</span>
					  <input className="form-control input-sm" value={attributes.get('name')} type="text" onChange={(e)=>{this.editCompAttribute('name',e.target.value)}} />
					</div>
					
					<div className="input-group">
					  <span className="input-group-addon">&emsp;选项&emsp;</span>
					  <input className="form-control input-sm" value={attributes.get('options')} type="text" onChange={(e)=>{this.editCompAttribute('options',e.target.value)}} />
					</div>
					
					<div className="ui divider"></div>
				</div>
			);
		//表单样式设置
		const styleSet=(
				<div className="panel-group">
					<h4 className="ui header">样式</h4>
					<div className="input-group">
					  <span className="input-group-addon">&emsp;字号&emsp;</span>
					  <input type="number" className="form-control input-sm"  step="1" min="6" value={attributes.get('fontSize')} onChange={(e)=>{this.editCompAttribute('fontSize',e.target.value)}} />
					</div>

					<div className="input-group">
						<span className="input-group-addon">字体颜色</span>
						<input type="color" value={attributes.get('fontColor')} onChange={(e)=>{this.editCompAttribute('fontColor',e.target.value)}} />
					</div>
					
					<div className="input-group">
						<span className="input-group-addon">背景颜色</span>
						<input type="color" value={attributes.get('background')} onChange={(e)=>{this.editCompAttribute('background',e.target.value)}} />
					</div>
					
				</div>
			);
		
		const compType=this.props.currentComp.get('type');//组件类型
		let content='';
		switch(compType){
			case 'label':
				content=(<div>{labelContent}{fontSet}{lineHeightSet}</div>);
				break;
			case 'image':
				content=(<div>{imgSet}</div>);
				break;
			case 'input':
				content=(<div>{baseSet}{lineHeightSet}{styleSet}</div>);
				break;
			case 'textarea':
				content=(<div>{baseSet}{lineHeightSet}{styleSet}</div>);
				break;
			case 'select':
				content=(<div>{baseSet2}{styleSet}</div>);
				break;
			default:
				content='';
		}
		return(
			<div className={classProps}>{content}</div>
		);
	}
}

export default EditTab;